<template>
	<view class="pop-promot-box" @click="hidePromptbox">
		<view class="pop-promot-back">
			<view class="pop-promot-title">选手信息</view>
			<view class="content-back">
				<view class="userHeadImage" :style="{'background-image': `url(${userinfo.userPicUrl})`}"></view>
				<view class="userHeadName">{{userinfo.username}} {{userinfo.gradeName}}年级</view>
				<view class="userInfoSchool">{{userinfo.schoolName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			userinfo: {
				type: Object,
			}
		},
		methods: {
			hidePromptbox: function(e) {
				this.$emit('hidePromptbox');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-promot-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-promot-back {
		padding: 20px;
		width: 80%;
		margin: 0 10%;
		border-radius: 10px;
		background-image: url(../../static/image/fjh/pop-content-back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: var(--themeColor);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pop-promot-title {
		font-size: 21px;
		color: white;
		text-align: center;
		margin-bottom: 15px;
		font-family: 'hzgb';
		text-shadow: -1px 1px 0 #992722, 1px 1px 0 #992722, 1px -1px 0 #992722, -1px -1px 0 #992722;
		-webkit-text-stroke: 1px #992722;
	}

	.content-back {
		width: 90%;
		display: flex;
		padding: 25px 10px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
		background: white;
	}

	.userHeadImage {
		width: 50px;
		height: 50px;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 25px;
		border: 2px solid #ffd83f;
	}

	.userHeadName {
		width: 100%;
		height: 25px;
		line-height: 25px;
		color: black;
		text-align: center;
		font-size: 14px;
		margin-top: 5px;
	}

	.userInfoSchool {
		width: 100%;
		text-align: center;
		line-height: 20px;
		color: rgb(70, 68, 68);
		font-size: 15px;
	}
</style>